<template>
  <div class="home">
    <div class="bg"></div>
    <div class="cont container-m">
      <DataStatMobil />
      <div class="search">
        <el-input :placeholder="$t('搜索服务')" prefix-icon="el-icon-search" v-model="searchText" @input="handleSearch">
        </el-input>
      </div>
      <div class="zd">
        <el-collapse v-model="activeNames">
          <el-collapse-item :name="key" v-for="(services, key) in serviceMap" :key="key">
            <template slot="title">
              <b class="services-title">{{ $t(key) }}</b>
            </template>
            <div @click="jumpToCreateOrder(service.serviceId)" class="p-button" v-for="(service, index) in services"
              :key="index">
              <div class="l">
                <div class="t1">{{ service.serviceId }}</div>
                <div class="t2">{{ $t(service.serviceName) }}</div>
              </div>
              <div class="r">
                <div class="b b1">￥{{ service.price }}</div>
                <div class="b b2">{{ service.time }}</div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
        <div class="sub-tool" @click="$router.push('/batchQueryTool')">批量查询工具（仅适用于提交批量订单）</div>
      </div>
    </div>
    <DialogMobile :visible="showNotice" @close="showNotice = false" />
  </div>
</template>

<script>
import apiService from '@/api/apiService';
import { isMobile, isWx, hasEnt } from "@/utils";
import DataStatMobil from "@/components/home/DataStatMobil.vue";
import DialogMobile from './components/DialogMobile.vue';

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Service",
  data() {
    return {
      timer: null,
      searchText: '',
      activeNames: [],
      serviceMap: null,
      serviceList: [],
      showNotice: false
    }
  },
  watch: {},
  components: {
    DataStatMobil,
    DialogMobile
  },
  computed: {
    mobile() {
      return isMobile();
    },
    recentServiceList() {
      let list = []
      if (this.serviceList.length) {
        list = this.serviceList.slice(0, 4)
      }
      return list
    },
    batchQueryEnt() {
      return hasEnt('AP_USER_BATCH_QUERY')
    },
    id() {
      return this.$store.state.id
    },
    roleName() {
      return this.$store.state.roleName
    },
    pointsBalance() {
      return this.$store.state.point
    }
  },
  mounted() {


    this.$nextTick(() => {
      apiService.get("/all-service", {}).then(res => {
        this.serviceList = res.data
        this.serviceMap = this.groupedByParent(this.serviceList)

      })
      // 10分钟显示
      if (this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.showNoticeHandle()
      }, 10)


    })


  },
  methods: {
    likeCompare(x, queryString) {
      // console.log((String)(x.value).indexOf(queryString))
      return (String)(x.serviceName).indexOf(queryString) !== -1
        || (String)(x.parent).indexOf(queryString) !== -1
        || (String)(x.serviceId).indexOf(queryString) !== -1
    },
    handleSearch() {
      let filterList = this.serviceList.filter(x => this.likeCompare(x, this.searchText))
      this.serviceMap = this.groupedByParent(filterList)
      /* 搜索时全展开 */
      if (this.searchText) {
        this.activeNames = Object.keys(this.serviceMap)
      } else {
        this.activeNames = []
      }
    },
    groupedByParent(list) {
      return list.reduce((acc, item) => {
        const key = item.parent;
        if (!acc[key]) {
          acc[key] = [];
        }
        acc[key].push(item);
        return acc;
      }, {})
    },
    jumpToCreateOrder(serviceId) {
      //全写传参 
      if (isWx()) {
        // fixme 客户又不要下面的返回栏了
        location.replace('/service?serviceId=' + serviceId)
        //this.$router.push({ path: '/service', query: { serviceId: serviceId } })
      } else {
        this.$router.push({ path: '/service', query: { serviceId: serviceId } })
      }
    },
    showNoticeHandle() {
      console.log(`output->111`, 111)
      const noticeTime = localStorage.getItem('noticeTime') ?? 0
      if (!noticeTime || new Date().getTime() - noticeTime > 10 * 60 * 1000) {
        this.showNotice = true
        localStorage.setItem('noticeTime', new Date().getTime())
      }
    }
  },

};
</script>

<style scoped lang="scss">
.home {
  padding-bottom: 1rem;
  min-height: 100vh;

  .cont {
    position: relative;
    z-index: 1;

    .zd {
      border-radius: 10px;
      overflow: hidden;
      margin-top: .1rem;

      .services-title {
        width: 100%;
        text-align: center;
      }

      .p-button {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: .05rem;
        margin: .05rem .05rem 0;
        border: 1px solid #f2f2f2;
        border-radius: 6px;
        box-shadow: 0 0 10px rgba(0, 0, 0, .06);
        background-color: #d7e9ff;

        .l {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          font-size: .14rem;
          margin-top: -0.05rem;

          .t1 {
            color: #5288e8;
          }

          .t2 {
            color: #666666;
            font-size: .13rem;
            font-weight: bold;
          }
        }

        .r {
          display: flex;
          align-items: center;
          padding-top: .1rem;

          .b {
            border-radius: 6px;
            font-size: .12rem;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            width: .5rem;
            height: .2rem;
            font-weight: bold;


            &.b1 {
              background-color: #fe5858;
            }

            &.b2 {
              background-color: #51c28f;
              margin-left: 5px;
            }
          }
        }
      }



      .p-button-c {
        text-align: center;
        box-sizing: border-box;
        display: unset;
        flex-wrap: wrap;
        margin: auto;
        width: 100%;
      }
    }

    .search {
      margin-top: .1rem;
    }
  }

  .bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-image: url('@/assets/images/home_m_bg_01.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-color: #ebf3ff;
  }
}

.sub-tool {
  height: .42rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: .14rem;
  background-color: #4E80EE;
  color: #fff;
  margin-top: .1rem;
  font-weight: bold;
}

::v-deep .search .el-input__inner {
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .06);
  border: none;
}

::v-deep .el-collapse-item__arrow {
  display: none;
}

::v-deep .el-collapse-item__header {
  height: 56px;
}

::v-deep .services-title {
  font-size: .14rem;
}
</style>
